<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">租借电池</view>
		</view>
		<form>
			<view class="cu-form-group">
				<view class="title">订单号</view>
				<view>{{info.tradeNo}}</view>
			</view>
			<view class="cu-form-group">
				<view class="title">会员昵称</view>
				<view>{{info.memberName}}</view>
			</view>
			<view class="cu-form-group">
				<view class="title">电池类型</view>
				<view>{{info.batteryTypeName}}</view>
			</view>
			<view class="cu-form-group">
				<view class="title">租借网点</view>
				<view>{{info.leasePlaceName}}</view>
			</view>
			<view class="cu-form-group">
				<view class="title">租借方式</view>
				<picker mode="selector" :range="typeArray" range-key="name" @change="bindTypeChangeIn">
					<view class="picker">{{info.leaseTypeName}}</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">租借日期</view>
				<picker mode="date" @change="bindLeaseDateChangeIn">
					<view class="picker">{{info.leaseDate}}</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">租借时间</view>
				<picker mode="time" @change="bindLeaseTimeChangeIn">
					<view class="picker">{{info.leaseTime}}</view>
				</picker>
			</view>
		    <view class="cu-form-group">
				<view class="title">设备序列号</view>
				<input placeholder="必须填写" v-model="batterySn"></input>
				<button class="cu-btn bg-orange shadow" @click="btnScan()">扫码</button>
		    </view>
			<view class="cu-form-group">
				<view class="title">设备启用状态</view>
				<view>{{stateName}}</view>
				<button class="cu-btn bg-orange shadow" @click="btnSendOpen()">发送命令启用</button>
			</view>
			<view class="cu-form-group flex justify-around">
				<button class="cu-btn bg-grey shadow" @click="btnSendLight(0)">关闭灯光</button>
				<button class="cu-btn bg-orange shadow" @click="btnSendLight(1)">开启灯光</button>
			</view>
		</form>
		<view class="cu-bar btn-group margin-top">
		    <button class="cu-btn bg-grey shadow-blur round" @click="$utils.toBack()">取消</button>
			<button class="cu-btn bg-orange shadow-blur round" @click="btnSubmit()">租借</button>
		</view>
		
		<!-- 交互框 -->
		<view class="cu-modal modal" :class="(modalName=='confirm')?'show':''">
		  <view class="cu-dialog bg-white">
			  <view class="head">命令发送成功，确认租借</view>
			  <view class="content">
			  	<view>{{batterySn}}</view>
			  </view>
			  <view class="footer">
			  	<button class="cu-btn bg-grey shadow-blur round" @click="$utils.toBack()">取消</button>
			  	<button class="cu-btn bg-orange shadow-blur round" @click="btnConfirm()">租借<text>({{autoTimes}}秒)</text></button>
			  </view>
		  </view>
		</view>
	</view>
</template>

<script>
	const wx = require('@/js_sdk/jweixin.js');
	export default {
		data() {
			return {
				info:{},
				batterySn:null,   //电池序列号
				stateName:'未发送命令',
				times:20,
				autoTimes:11,		//30秒
				modalName:null,
				typeArray:[{type:2,name:'预约到店租借'},{type:3,name:'同城快递租借'}]
			};
		},
		onLoad(option) {
			const _self = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('fromData', function(data) {
			    console.log(data)
				_self.info = Object.assign({},data);
			})
		},
		onShow(){
			this._jssdk();
		},
		methods:{
			_jssdk(){
				let url = location.href.split('#')[0];
				const api = this.$request;
				api.post(api.url.wxSDK,{
					appId:this.$store.getters.GET_AppId,
					url:url
				},res=>{
					console.log(res)
					if(res.code==200){
						const data = res.body;
						wx.config({
						  debug: false,
						  appId: data.config.appId,        // 必填，公众号的唯一标识
						  timestamp: data.config.timestamp,// 必填，生成签名的时间戳
						  nonceStr: data.config.nonceStr,  // 必填，生成签名的随机串
						  signature: data.config.signature,// 必填，签名
						  jsApiList: ['scanQRCode']        // 必填，需要使用的JS接口列表
						});
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else {
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						})
					}
				})
			},
			_autoConfirm:function(){
				const _self = this;
				if(_self.modalName == 'confirm'){
					_self.autoTimes = _self.autoTimes - 1;
					if(_self.autoTimes > 0){
						setTimeout(function(){
								_self._autoConfirm();
						},1000);
					}else {
						_self.btnConfirm()
					}
				}
			},
			_sendOpenResult:function(){
				const _self = this;
				const api = this.$request;
				api.post(api.url.bxscnBatteryOperateResult,{
					tradeNo:this.info.tradeNo,
					deviceSn:this.batterySn
				},(res)=>{
					console.log(res)
					if(res.code == 200){
						uni.hideLoading();
						_self.stateName = '发送命令成功';
						_self.modalName = 'confirm';
						_self.autoTimes = 11; 
						_self._autoConfirm();
					}else{
						_self.times = _self.times - 1;
						if(_self.times > 0){
							setTimeout(function(){
								_self._sendOpenResult();
							},1000);
						}
					}
				})
			},
			bindTypeChangeIn:function(e){
				let index = e.detail.value;
				let item = this.typeArray[index];
				this.info.leaseType = item.type;
				this.info.leaseTypeName = item.name;
			},
			bindLeaseDateChangeIn:function(e){
				console.log(e.detail.value);
				this.info.leaseDate = e.detail.value;
			},
			bindLeaseTimeChangeIn:function(e){
				console.log(e.detail.value);
				this.info.leaseTime = e.detail.value;
			},
			btnScan(){
				console.log("scanQRcode")
				const _self = this;
				wx.ready(()=>{
					wx.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: function (res) {
							console.log(res.resultStr);
							let arr = res.resultStr.split('/');
							_self.batterySn = arr.pop();
						}
					})
				})
			},
			btnSendOpen(){
				if(!this.batterySn){
					uni.showModal({
						title:'温馨提示',
						content:'请先填写电池序列号',
						showCancel:false
					})
					return;
				}
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要发送命令启用电池吗？',
					complete:function(res){
						if(res.confirm){
							uni.showLoading({
								title:'处理中...'
							})
							api.post(api.url.bxscnBatteryOperate,{
								tradeNo:_self.info.tradeNo,
								createDate:_self.info.createDate,
								deviceSn:_self.batterySn,
								type:1
							},(res)=>{
								console.log(res)
								if(res.code==200){
									_self.times = 20;
									_self._sendOpenResult();
								}else if(res.msg){
									uni.hideLoading();
									uni.showModal({
										content:res.msg,
										showCancel:false
									})
								}else{
									uni.hideLoading();
									uni.showToast({
										title:'操作失败',
										icon:'error'
									})
								}
							})
						}
					}
				})
			},
			btnSendLight:function(type){
				uni.showLoading({
					title:'处理中...'
				})
				const _self = this;
				const api = this.$request;
				api.post(api.url.bxscnBatteryLightOperate,{
					deviceSn:_self.batterySn,
					type:type
				},(res)=>{
					console.log(res)
					if(res.code==200){
						uni.hideLoading();
						uni.showToast({
							title:'操作成功',
							icon:'success'
						})
					}else if(res.msg){
						uni.hideLoading();
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						uni.hideLoading();
						uni.showToast({
							title:'操作失败',
							icon:'error'
						})
					}
				})
			},
			btnConfirm:function(){
				const _self = this;
				const api = this.$request;
				
				_self.modalName = null;
				//发送自动确定租借
				uni.showLoading({
					title:'处理中...'
				})
				let leaseDate = _self.info.leaseDate + " " + _self.info.leaseTime;
				
				api.post(api.url.bxscnShopOrderLease,{
					tradeNo:_self.info.tradeNo,
					createDate:_self.info.createDate,
					deviceSn:_self.batterySn,
					leaseType:_self.info.leaseType,
					leaseDate:leaseDate
				},(res)=>{
					console.log(res)
					uni.hideLoading();
					if(res.code==200){
						setTimeout(function(){
							uni.navigateBack();
						},700)
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						uni.showToast({
							title:'操作失败',
							icon:'error'
						})
					}
				})
			},
			btnSubmit:function(){
				if(!this.batterySn || this.batterySn == ''){
					uni.showModal({
						title:'温馨提示',
						content:'请填写租借的电池序列号'
					})
					return;
				}
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要租借【'+this.batterySn+'】电池吗？',
					complete:function(res){
						if(res.confirm){
							uni.showLoading({
								title:'处理中...'
							})
							let leaseDate = _self.info.leaseDate + " " + _self.info.leaseTime;
							
							api.post(api.url.bxscnShopOrderLease,{
								tradeNo:_self.info.tradeNo,
								createDate:_self.info.createDate,
								deviceSn:_self.batterySn,
								leaseType:_self.info.leaseType,
								leaseDate:leaseDate
							},(res)=>{
								console.log(res)
								uni.hideLoading();
								if(res.code==200){
									setTimeout(function(){
										uni.showModal({
											content:'租借成功',
											showCancel:false,
											complete:function(){
												uni.navigateBack();
											}
										})
									},700)
								}else if(res.msg){
									uni.showModal({
										content:res.msg,
										showCancel:false
									})
								}else{
									uni.showToast({
										title:'操作失败',
										icon:'error'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
.modal{
	.head{
		margin: 40rpx 0 60rpx;
		font-size: 30rpx;
		font-weight: 600;
	}
	.content{
		&>view{
			width: 80%;
			height: 80rpx;
			margin: 0 auto 48rpx;
			border:1rpx solid #e0e0e0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-left: 20rpx;
			font-size: 24rpx;
			input{
				width: 100%;
				height: 80rpx;
				text-align: left;
				font-size: 24rpx;
			}
		}
	}
	.footer{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 15px;
		&>view{
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #fff;
			color: #eca768;
			border-top: 1rpx solid #e0e0e0;
		}
		.confirm{
			background:linear-gradient(90deg,#eca768,#e85b36);
			color: #ffffff;
		}
	}
}
</style>
